<template>
	<div>
		<el-form :model="queryForm" label-width="120px" :inline="true">
		  <el-form-item label="账号">
			<el-input v-model="queryForm.account" clearable />
		  </el-form-item>
		  <el-form-item label="姓名">
		  	<el-input v-model="queryForm.name" clearable />
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="init()">查询</el-button>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" @click="saveDialog = true">新增</el-button>
		  </el-form-item>
		</el-form>
	</div>
	<div style="margin-top: 1%;">
	<el-table :data="tableData" style="width: 100%">
	  <el-table-column prop="account" label="账号" />
	  <el-table-column prop="name" label="姓名" />
	  <el-table-column prop="lastLoginTime" label="最后登录时间" />
	  <el-table-column prop="statusDesc" label="状态" />
	<el-table-column prop="createTime" label="创建时间" />
	<el-table-column prop="updateTime" label="修改时间" />
	<el-table-column label="操作" width="300">
	  <template #default="scope">
		<el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
		<el-button size="small" @click="handleResetPwd(scope.$index, scope.row)">重置密码</el-button>
		<el-dropdown size="small" split-button type="primary" @command="handleStatus(scope.row.id, $event)">
		    更改状态
		    <template #dropdown>
		      <el-dropdown-menu>
		        <el-dropdown-item command="1" >激活</el-dropdown-item>
		        <el-dropdown-item command="2" >锁定</el-dropdown-item>
		        <el-dropdown-item command="3" >注销</el-dropdown-item>
		      </el-dropdown-menu>
		    </template>
		  </el-dropdown>
	  </template>
	</el-table-column>
	</el-table>
	</div>
	
	<div style="margin-top: 3%;">
		  <el-pagination background layout="prev, pager, next, total, sizes" 
			:total="total" 
			v-model:current-page="page" 
			:page-sizes="[10, 20, 50]" 
			v-model:page-size="pageSize"
			@size-change="init"
			@current-change="init"
			/>
		</div>
		
		
	<el-dialog v-model="saveDialog" title="添加用户">
	    <el-form :model="saveForm">
	      <el-form-item label="账号" :label-width="formLabelWidth">
	        <el-input v-model="saveForm.account" autocomplete="off" clearable required/>
	      </el-form-item>
	      <el-form-item label="名字" :label-width="formLabelWidth">
	        <el-input v-model="saveForm.name" autocomplete="off" clearable required/>
		</el-form-item>
		<el-form-item label="邮箱" :label-width="formLabelWidth">
		  <el-input v-model="saveForm.mail" autocomplete="off" clearable required/>
		</el-form-item>
		<el-form-item label="电话" :label-width="formLabelWidth">
		  <el-input v-model="saveForm.phoneNumber" autocomplete="off" clearable required/>
		</el-form-item>
		<el-form-item label="角色" :label-width="formLabelWidth">
			<el-checkbox-group v-model="saveForm.roleIds">
			  <el-checkbox v-for="role in roles" :key="role.id" :label="role.id">
			  {{role.roleName}}
			  </el-checkbox>
		  </el-checkbox-group>
		</el-form-item>
	    </el-form>
		  <template #footer>
		    <span class="dialog-footer">
		      <el-button @click="saveDialog = false">取消</el-button>
		      <el-button type="primary" @click="saveHandler()">
		        确定
		      </el-button>
		    </span>
		  </template>
	  </el-dialog>
	  
	  <el-dialog v-model="updateDialog" title="修改用户">
	      <el-form :model="updateForm">
	        <el-form-item label="名字" :label-width="formLabelWidth">
	            <el-input v-model="updateForm.name" autocomplete="off" clearable required/>
	        </el-form-item>
	        <el-form-item label="邮箱" :label-width="formLabelWidth">
	          <el-input v-model="updateForm.mail" autocomplete="off" clearable required/>
	        </el-form-item>
	        <el-form-item label="电话" :label-width="formLabelWidth">
	          <el-input v-model="updateForm.phoneNumber" autocomplete="off" clearable required/>
	        </el-form-item>
			<el-form-item label="角色" :label-width="formLabelWidth">
				<el-checkbox-group v-model="updateForm.roleIds">
				  <el-checkbox v-for="role in roles" :key="role.id" :label="role.id">
				  {{role.roleName}}
				  </el-checkbox>
			  </el-checkbox-group>
			</el-form-item>
	      </el-form>
	  	  <template #footer>
	  	    <span class="dialog-footer">
	  	      <el-button @click="updateDialog = false">取消</el-button>
	  	      <el-button type="primary" @click="updateHandler()">
	  	        确定
	  	      </el-button>
	  	    </span>
	  	  </template>
	    </el-dialog>
</template>

<script>
	import { ElMessageBox } from 'element-plus'
export default {
	name: 'goodsType',
	created() {
	    this.init()
		this.initRole()
	},
	data() {
		return {
			tableData: [],
			total: 0,
			page: 1,
			pageSize: 20,
			saveDialog: false,
			updateDialog: false,
			formLabelWidth: '100px',
			goodsTypeList: [],
			queryForm: {
				account: '',
				name: ''
			},
			saveForm: {
				account: '',
				name: '',
				mail: '',
				phoneNumber: '',
				roleIds: []
			},
			updateForm: {
				id: 0,
				account: '',
				name: '',
				mail: '',
				phoneNumber: '',
				roleIds: []
			},
			roles: []
		}
	},
	methods: {
		init() {
			this.$axios.post('sys/user/list',
			{
				account: this.$data.queryForm.account,
				name: this.$data.queryForm.name,
				page: this.$data.page,
				pageSize: this.$data.pageSize
			})
			.then(response => {
				this.$data.tableData = response.list
				this.$data.total = response.total
			}).catch(error => {
				console.log(error)
			})
		},
		initRole() {
			this.$axios.get('sys/role/all')
			.then(response => {
				this.$data.roles = response
			}).catch(error => {
				console.log(error)
			})
		},
		saveHandler() {
			this.$axios.post('sys/user/save',
			this.$data.saveForm
			)
			.then(response => {
				this.init()
				this.$data.saveForm = {}
				this.$data.saveDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		updateHandler() {
			this.$axios.post('sys/user/update',
			this.$data.updateForm
			)
			.then(response => {
				this.init()
				this.$data.updateForm = {}
				this.$data.updateDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		handleEdit(idx, rowData) {
			console.log(rowData)
			
			Object.assign(this.$data.updateForm, rowData)
			//this.$data.updateForm = rowData
			this.$data.updateDialog = true
		},
		handleLock(idx, rowData) {
			console.log('锁定账号:' + rowData.account)
			
		},
		handleStatus(id, command) {
			console.log('更改状态账号:' + id + "command:" + command)
			this.$axios.post('sys/user/changeStatus',
			{
				id: id,
				status: status
			}
			)
			.then(response => {
				this.init()
				this.$data.updateDialog = false
			}).catch(error => {
				console.log(error)
			})
		},
		handleResetPwd(idx, rowData) {
			this.$axios.put('sys/user/resetPwd/' + rowData.id)
			.then(response => {
				this.msg.success('密码重置成功')
				this.init()
			}).catch(error => {
				console.log(error)
			})
		}
	}
}
</script>

<style>
</style>